<template>
  <div class="wb-item-qsds-vote">
    <div class="item-rank-friend" v-if="rankFriendItemData" :style="itemStyle" @click.stop>
      <div class="wb-item-rank">
        <img v-if="medalUrl" class="rank" v-lazy="medalUrl" alt />
        <div class="head-con margin-right-8 padding-8">
          <img v-lazy="getVariableItem.pic_url">
        </div>
        <div class="el-progress-bar">
          <div class="el-progress-bar__outer border-radius-60" :style="barBgStyle">
            <div class="el-progress-bar__inner border-radius-60" :style="barStyle">
              <div class="el-progress-bar__innerText">
                <img :src="commonAttr.barImage">
                <p v-if="voteItemData && !isVoteStr" :style="votePosition" @click.stop v-html="voteStr"></p>
              </div>
            </div>
          </div>
        </div>
        <!-- <p>点击签到按钮实现签到，后台统计签到的时间、uid，每个uid/每天限制签到1次</p> -->
      </div>
      <p class="name margin-top-8" :style="nameFontSize">{{getUserName}}</p>
    </div>
    <div class="item-qsds-vote" v-else :style="qsdsItemStyle">
      <div v-if="dataKeys && dataKeys.pic_url" class="vote-head-con" @click.stop>
        <p v-if="voteItemData && commonAttr.isSort" class="padding-0-8 font-bold" :style="medalPosition">{{index+1}}</p>
        <div class="qsds-head-img" :style="imgStyle">
          <img class="head-img" :src="getImgOrHeadUrl">
        </div>
      </div>
      <p v-else class="qsds-vote-con-img" @click.stop="onJump">
        <img :style="imgStyle" v-if="getVariableItem && getVariableItem.url" v-lazy="getVariableItem.url" />
      </p>
      <p class="qsds-vote-con-title padding-left-16" @click.stop="onJump">
        <span class="qsds-vote-con-title-num">
          <b v-if="dataKeys && dataKeys.name">{{getUserName}}</b>
          <b v-else>{{ getVariableItem.push_title || getVariableItem.title }}</b>
        </span>
        <span :style="getTextStyle" class='vote-con-title-desc'>
         {{ getBlogText }}
        </span>
      </p>
      <van-button v-if="commonAttr.isBtn" :style="btnStyles"></van-button>
    </div>
    <p v-if="voteItemData && !isVoteStr" :style="votePosition" @click.stop v-html="voteStr"></p>
    <img v-if="voteItemData && commonAttr.isSort" class="rank-icon" v-lazy="rankUrl" :style="crownPosition" @click.stop alt />
  </div>
</template>
<script>
import { utils } from "@/components/utils/utils"
import { commonUtils } from "@/components/utils/common-utils"
import { vote } from "@/components/js/vote"
import { getPxOVwByValue } from '@/store/utils'


export default {
  mixins: [utils, commonUtils, vote],
  computed: {
    qsdsItemStyle() {
      let index = this.index;
      let style = this.itemStyle;
      let itemBgs = this.commonAttr.itemBgs && this.commonAttr.itemBgs.split(",");
      if(itemBgs) {
        let len = itemBgs.length - 1;
        let url = "";
        if (index <= len) {
          url = itemBgs[index];
        } else {
          url = itemBgs[len];
        }
        if(url){
          style.backgroundImage = "url(" + url + ")";
        }
      }
      return style;
    },
    barStyle(){
      let voteItem = this.wbLists[this.index]
      let progress = voteItem ? voteItem.progress: 0
      if(!progress){
        progress = 0
      }
      // progress = 90
      return {
        width: (progress > 100 ? 100 : progress) + '%',
        backgroundColor: this.commonAttr.progressBarColor
      }
    },
    barBgStyle(){
      return {
        backgroundColor: this.commonAttr.progressBarBgColor,
        height: getPxOVwByValue(60)
      }
    },
  },
  mounted(){
  },
  methods: {
  }
};
</script>
<style lang="scss">
.wb-item-qsds-vote{
  height: 100%;
  position: relative;
  
  .item-qsds-vote {
    height: 100%;
    display: flex;
    flex: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    .qsds-vote-con-img {
      display: flex;
      justify-content: center;
      justify-items: center;
      align-items: center;
      align-content: center;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .qsds-vote-con-title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      flex: 1;
      height: inherit;
      span {
        position: relative;
        width: 99%;
      }
      .qsds-vote-con-title-num {
        display: flex;
        b{
          font-size: inherit;
          color: inherit;
        }
        b:last-child {
          margin-left: var(--size-12);
          font-size: 0.8em;
        }
      }
      .vote-con-title-desc {
        font-size:inherit;
        line-height:1.4;
        opacity: 0.6;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
  .vote-head-con {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      .rank {
        position: absolute;
      }
      .qsds-head-img{
        width: 100%;
        height: 100%;
        .head-img {
          width: 100%;
          object-fit: contain;
          border-radius: 50%;
        }
      }
    }
  .rank-con {
    text-align: center;
  }

  .item-rank-friend{
    .wb-item-rank{
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      align-content: center;
    }
    .rank{
        width: var(--size-60);
        height: var(--size-80);
      }
    .head-con{
      position: relative;
      z-index: 10;
      background-color: #5c4330;
      border-radius: 50%;
      width: var(--size-120);
      
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .name{
      font-size: inherit;
    }
  }

  .el-progress-bar {
    margin-right: var(--size-20);
    margin-left: var(--size--26);
    padding-right: 0;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    .el-progress--text-inside .el-progress-bar {
      padding-right: 0;
      margin-right: 0;
    }
    .el-progress-bar__outer {
      background-color: #7e5e31;
      overflow: initial;
      position: relative;
      vertical-align: middle;
    }
    .el-progress-bar__inner {
      position: absolute;
      left: 2%;
      top: 20%;
      height: 60%;
      background-color: #fdf696;
      text-align: right;
      line-height: 1;
      white-space: nowrap;
      font-size: inherit;
    }
    .el-progress-bar__innerText {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      margin: 0;
      img{
        width: var(--size-108);
        height: var(--size-84);
        margin-top: var(--size--30);
      }
      .num{
        position: absolute;
        left: 0;
        top: var(--size-50);
        color: #fdf796;
        font-size: inherit;
      }
    }
    .el-progress-bar__inner:after {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle;
    }
  }
  .rank-icon{
    width: var(--size-40);
    height: var(--size-32);
  }
}

</style>
